<template>
  <div class="content">
    <NavHeader title="评价" />
    <div class="eva-content">
      <div class="star-area">
        <div v-for="i in [1,2,3,4,5]" :class="['star-item',i<start_index?'light':'']" @click="doEva(i)">
        </div>
      </div>
      <div class="comment">
        <textarea ref='commentInput' v-model="comment"  @input="onChange" placeholder="亲，菜品的口味如何，商家的服务是否周到?" class="comment-input"></textarea>
        <span class="count">{{this.count}}</span>
      </div>
      <p class="one-line product-name">+厚切鸡排 香辣口水鸡饭. 中辣</p>
    </div>
    <div class="submit" @click="submit">提交评价</div>
  </div>
</template>

<script>
import  NavHeader from "@/components/common/NavHeader"
export default {
  data(){
    return {
      chinese_inputing:false,
      max_count:140,
      count:140,
      start_index:0,
      comment:""
    }
  },
  components: {
    NavHeader
  },
  mounted() {
    this.$refs.commentInput.addEventListener('compositionstart', ()=>{
      this.chinese_inputing = true;
    });
    this.$refs.commentInput.addEventListener('compositionend', (e)=>{
      this.chinese_inputing = false;
      this.onIuput(e.target.value);
    });
  },
  methods:{
    onIuput(value){

      let num = value.length;
      if (!this.chinese_inputing) {
          this.count=this.max_count - num
      }
    },
    onChange(e){
     this.onIuput(e.target.value)
    },
    doEva(i){
        this.start_index= i + 1
    },
    submit(){
      if(this.comment.length==0){
        alert("请填写评论信息")
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
  body {
    min-height: 100%;
    background-color: #efefef;
    color: #2f2f2f;
  }

  .content {
    height: 100%;
    .eva-content {
      background-color: #fff;
      overflow: hidden;
      padding: (0.2rem);
      margin-top: (1.48rem);
    }
    .star-area {
      text-align: center;
      margin-top: (0.6rem);
    }
    .star-item {
      width: (0.64rem);
      height: (0.64rem);
      background-image: url('/app2/img/gray-star.png');
      background-size: cover;
      display: inline-block;
      margin-right: (0.2rem);
      &.light {
        background-image: url('/app2/img/light-star.png');
      }
    }
    .comment {
      margin-top: (0.4rem)
      margin-left: (0.2rem)
      margin-right: (0.2rem);
      border-bottom: 1px solid #e4e4e4;
      padding-bottom: (0.26rem);
      position: relative;

      .count {
        font-size: (11px);
        color: #aaa;
        position: absolute;
        bottom: (0.48rem);
        right: (0.18rem);
      }
      .comment-input {
        width: 100%;
        height: (2rem);
        border: 1px solid #c6c6c6;
        box-sizing: border-box;

        outline: none;
        -webkit-appearance: none;
        border-radius: 0;

        font-size: (16px);
        padding: (0.2rem);
        background-color: #fafafa;


      }

    }
    .product-name {
      padding-top: (0.4rem);
      padding-bottom: (0.4rem);
      padding-left:(0.4rem);
      text-align: left;
      font-size: (16px);
    }
    .submit {
      width: 100%;
      height: (1rem);
      line-height: (1rem);
      font-size: (16px);
      color: #333;
      background-color: #ffd161;
      position: fixed;
      max-width:750px;
      margin-left auto;
      margin-right auto;
      bottom: 0;
      text-align: center;
    }
  }
</style>
